<html>

<head>
    <meta charset="utf-8">


</head>

<body>
    <h2>Sciter的JSX编程</h2>
    <div id="root"></div>
</body>

<script>
    function t1() {
        let root = document.$("#root");
        root.patch(<div><span>文本内容</span></div>)
    }

    function tick() {
        const velement = <div id="root">
            <h1>Hello, world!</h1>
            <h2>It is {new Date().toLocaleTimeString()}.</h2>
        </div>;
        // patch()函数实现了虚拟dom的更新机制,只更新修改的内容
        document.$("div#root").patch(velement);
        return true; // to keep timer running
    }

    // setInterval(tick, 1000);

    // function Welcome(props){
    //     return <h1>Hello,{props.name}</h1>
    // }

    // 支持class式组件
    // class Welcome extends Element {
    //     // 构造函数对于函数式组件
    //     constructor(props) {
    //         super();
    //         this.props = props;
    //     }
    //     // render()对于函数式组件的return
    //     render() {
    //         return <h1>Hello, {this.props.name}</h1>;
    //     }
    // }

    // let root = document.$("#root");
    // // 自定义组件使用content()插入根节点
    // root.content(<Welcome name="Jsx编程2323" />)


    // function Welcome(props) {
    //     return <h1>Hello, {props.name}!</h1>;
    // }

    // function App() {
    //     return <body>
    //         <Welcome name="Ivan" />
    //         <Welcome name="Olga" />
    //         <Welcome name="Andrew" />
    //     </body>;
    // }

    // document.body.patch(<App />);

    // class Clock extends Element {
    //     // declaring local data storage with initial value 
    //     time = new Date();

    //     render() {
    //         return <div>
    //             <h1>Hello, world!</h1>
    //             <h2>It is {this.time.toLocaleTimeString()} now.</h2>
    //         </div>;
    //     }
    // }

    // class Clock extends Element {
    //     time = new Date(); // setting initial state 

    //     // 组件挂载后的回调
    //     componentDidMount() { // instance of the class is attached to real DOM
    //         // 注册定时器函数
    //         this.timer(1000, () => {
    //             // 更新状态 自动重新渲染
    //             this.componentUpdate({ time: new Date() });
    //             return true; // to keep the timer ticking
    //         });
    //     }

    //     render() {
    //         return <div>
    //             <h1>Hello, world!</h1>
    //             <h2>It is {this.time.toLocaleTimeString()} now.</h2>
    //         </div>;
    //     }
    // }

    //     class Search extends Element {

    //         render() {
    //             return <search>
    //                 <input type="text" />
    //                 <button class="do">搜索</button>
    //             </search>;
    //         }

    //         ["on click at button.do"](evt, button) {
    //             console.log("点击搜索",evt);
    //         }
    //         ["on change at input"](evt, input) {
    //             console.log("input输入内容",evt);
    //         }

    //         get value() { return this.$("input").value; }
    //         set value(nv) {
    //             this.$("input").value = nv;
    //         } 
    //    }

    // 生成列表元素
    // 类似vue的v-for循环
    // 同样支持key提高渲染
    const numbers = [1, 2, 3, 4, 5];
    const listItems = numbers.map((number) =>
        <li>{number}</li>
    );

    // time作为class组件的状态,
    // 使用this可以读取class的属性
    let root = document.$("#root");
    // 自定义组件使用content()插入根节点
    // 这里的listItems变量是jsx表达式
    root.content(<ul>{listItems}</ul>)
    //
</script>

</html>